<template>
    <div class="app-cont">
        <div class="app-zuo">
            <div class="zou-top">
              <div class="border">
                <div class="border-title">
                <span>选择日期</span>
                <div class="block">
                  <el-date-picker
                    v-model="value2"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    style=" margin-top: 10px;"
                    :picker-options="pickerOptions">
                  </el-date-picker>
                </div>
              </div>
              </div>
              <div class="border">
                  <div class="border-title">
                  <span>选择时段</span>
                  <div class="block">
                    <el-time-picker
                    style=" margin-top: 10px;"
                      is-range
                      v-model="value1"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      placeholder="选择时间范围">
                    </el-time-picker>
                  </div>
                </div>
              </div>
              <div class="border">
                  <div class="border-title">
                  <span>通道选择</span>
                  <div class="block">
                    <el-radio-group v-model="radio" class="tdxz">
                      <el-radio :label="1">1</el-radio>
                      <el-radio :label="2">2</el-radio>
                      <el-radio :label="3">3</el-radio>
                      <el-radio :label="4">4</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </div>
              <div class="border">
                  <div class="border-title">
                  <span>码流类型</span>
                  <div class="block">
                    <el-radio-group v-model="radio2" class="tdxz">
                      <el-radio :label="1">所有码流</el-radio>
                      <el-radio :label="2">末码流</el-radio>
                      <el-radio :label="3">子码流</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </div>
              <div class="border">
                  <div class="border-title">
                  <span>存储器类型</span>
                  <div class="block">
                    <div class="block">
                    <el-radio-group v-model="radio3" class="tdxz">
                      <el-radio :label="1">所有存储器</el-radio>
                      <el-radio :label="2">末存储器</el-radio>
                      <el-radio :label="3">子存储器</el-radio>
                    </el-radio-group>
                  </div>
                  </div>
                </div>
              </div>
              <div class="border">
                  <div class="border-title2">
                  <span>音视频资源类型</span>
                  <div class="block">
                    <el-radio-group v-model="radio4" class="tdxz">
                      <el-radio :label="1">音视频</el-radio>
                      <el-radio :label="2">音频</el-radio>
                      <el-radio :label="3">视频</el-radio>
                      <el-radio :label="4">视频播放器</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </div>
              <el-button type="primary" style="margin-left: 40%;margin-top: 10px;">查询</el-button>       
            </div> 
        </div>
        <div class="app-you">
            <div class="you-top"></div> 
            <div class="you-botton">
            </div>
        </div>
    </div>
  </template>
 
 <script>
  export default {
    data() {
      return {
        radio2:2,
        radio: 3,
        radio3:1,
        radio4:1,
        tabPositions:"",
        tabPosition: 'left',
        activeName: 'second',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      },

      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

  <style>
  .app-cont{
    width: 100%;
    height: 800px;
  }
    .app-zuo{
        width: 35%;
        height: 100%;
        float: left;
        border-right: 2px #e0dbdb solid;
    }

    .zou-top{
        height: 40%;
    }
    .border {
      width: 280x;
      height: 65px;
      margin-top: 30px;
      margin-left: 20px;
      border: 2px solid black;
      border-radius: 4px;
    }
    .border-title {
      width: 110px;
      height: 30px;
      background: white;
      text-align: center;
      margin-top: -12px;
      margin-left: 10px;
    }

    .border-title2 {
      width: 120px;
      height: 30px;
      background: white;
      text-align: center;
      margin-top: -12px;
      margin-left: 10px;
    }

    .tdxz{
      display: flex;
      flex-wrap: row nowrap;
      margin-top: 20px;
    }
    .app-you{
        width: 65%;
        height: 100%;
        float: left;
    }
    .you-top{
        height: 58%;
        width: 100%;
        background-image: url('~@/assets/images/htivdo.png');
        background-size:100% 100%;
    }
    .you-botton{
        height: 40%;
        width: 100%;
        background-image: url('~@/assets/images/htivdo2.png');
        background-size:100% 100%;
    }
  </style>